<template>
  <div class="login-base">
    <div class="login-page d-flex justify-center">
      <div class="login-view d-flex align-center">
        <div class="right">
          <div class="d-flex align-end">
            <img :src="Logo" alt="logo" height="40">
            <div class="font-size-title-3 pl-4" style="color: var(--el-color-white)">IceSoft Admin</div>
          </div>
        </div>
        <div class="left">
          <div class="font-size-body-1 pb-5" style="color: #fff">IceSoft 企业级中后台前端解决方案</div>
          <el-form
            ref="formRef"
            :model="api.form"
            :rules="rules"
            class="login-form"
            status-icon
          >
            <i-xyz-transition :duration="'3'" :ease="'in-out'" :left="'1'" appear mode="out-in">
              <div v-if="api.form.accountType=='ACCOUNT'" :key="'ACCOUNT'">
                <el-form-item
                  label-width="0"
                  prop="username"
                >
                  <el-input
                    v-model.trim="api.form.username"
                    :show-word-limit="false"
                    autocomplete="username"
                    clearable
                    onfocus="this.removeAttribute('readonly');"
                    :prefix-icon="User"
                    placeholder="用户账号" />
                </el-form-item>

                <el-form-item
                  label-width="0"
                  label=""
                  prop="password"
                >
                  <el-input
                    v-model="api.form.password"
                    clearable
                    placeholder="用户密码"
                    show-password
                    :prefix-icon="Lock"
                    type="password" />
                </el-form-item>

                <el-form-item
                  v-if="api.settingState.code"
                  label=""
                  label-width="0"
                  prop="captcha"
                >
                  <el-input
                    v-model="api.form.captcha"
                    class="login-captcha"
                    clearable
                    placeholder="验证码">
                    <template #append>
                      <div
                        style="height: 30px"
                        @click="api.captchaImage()">
                        <div
                          v-if="!api.img.path"
                          v-loading="api.img.loading"
                          style="height: 30px;width: 130px"></div>
                        <img
                          v-if="api.img.path"
                          v-loading="api.img.loading"
                          :src="'data:image/png;base64,' +api.img.path"
                          alt="captcha"
                          height="30"
                          width="130">
                      </div>
                    </template>
                  </el-input>
                </el-form-item>

              </div>

              <div v-if="api.form.accountType == 'PHONE'" :key="'PHONE'">
                <el-form-item
                  label=""
                  label-width="0"
                  prop="username"
                >
                  <el-input
                    v-model="api.form.username"
                    clearable
                    :prefix-icon="Iphone"
                    placeholder="手机号" />
                </el-form-item>

                <el-form-item
                  label=""
                  label-width="0"
                  prop="password"
                >
                  <el-input
                    v-model="api.form.password"
                    autocomplete="new-password"
                    clearable
                    placeholder="短信验证码">
                    <template #append>
                      <el-button
                        :disabled="api.smsState.timing!=60"
                        :loading="api.smsState.loading"
                        @click="api.sendSmsCode()">
                        {{ api.smsState.msg }}
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>

              </div>
              <div v-if="api.form.accountType == 'EMAIL'" :key="'EMAIL'">
                <el-form-item
                  label=""
                  label-width="0"
                  prop="username"
                >
                  <el-autocomplete
                    v-model="api.form.username"
                    :fetch-suggestions="querySearch"
                    class="fill-width"
                    clearable
                    :prefix-icon="Message"
                    placeholder="邮箱账号" />
                </el-form-item>

                <el-form-item
                  label=""
                  label-width="0"
                  prop="password"
                >
                  <el-input
                    v-model="api.form.password"
                    clearable
                    placeholder="邮箱验证码">
                    <template #append>
                      <el-button @click="api.sendMail()">发送验证码</el-button>
                    </template>
                  </el-input>
                </el-form-item>
              </div>
            </i-xyz-transition>

            <el-button
              :disabled="api.submitButton.disable"
              :loading="api.submitButton.loading"
              class="fill-width"
              type="primary"
              @click="submit">登录
            </el-button>

          </el-form>
          <div class="d-flex align-center fill-width pt-8" style="width: 320px">
            <div style="font-size: 14px;color: #808695" class="mr-4">其它登录方式</div>
            <el-space size="large">
              <el-tooltip
                content="账号登录"
                placement="bottom"
                effect="customized AuthAccount"
              >
                <img
                  class="auth-item AuthAccount cursor-pointer"
                  :class="{'active':api.form.accountType==='ACCOUNT'}"
                  @click="api.changLoginType('ACCOUNT')"
                  :src="AuthAccount"
                  alt="AuthAccount"
                  height="24">
              </el-tooltip>
              <el-tooltip
                effect="customized AuthPhone"
                content="手机号登录"
                placement="bottom"
              >
                <img
                  class="auth-item AuthPhone cursor-pointer"
                  :class="{'active':api.form.accountType==='PHONE'}"
                  @click="api.changLoginType('PHONE')"
                  :src="AuthPhone"
                  alt="AuthPhone"
                  height="24">
              </el-tooltip>
              <el-tooltip
                effect="customized AuthEmail"
                content="邮箱登录"
                placement="bottom"
              >
                <img
                  class="auth-item AuthEmail cursor-pointer"
                  :class="{'active':api.form.accountType==='EMAIL'}"
                  @click="api.changLoginType('EMAIL')"
                  :src="AuthEmail"
                  alt="AuthEmail"
                  height="24">
              </el-tooltip>
            </el-space>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { LoginApi } from "~/api/system/login/login.api";
import { onMounted, reactive, ref } from "vue";
import { FormRules } from "element-plus";
import Logo from "~/assets/logo-white.png";
import { Iphone, Lock, Message, User } from "@element-plus/icons-vue";
import AuthAccount from "~/assets/auth_account.svg";
import AuthPhone from "~/assets/auth_phone.svg";
import AuthEmail from "~/assets/auth_email.svg";

const api = new LoginApi();
const formRef = ref();

const rules = reactive<FormRules>({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

onMounted(() => {
  api.captchaImage();
  window.localStorage.removeItem("token");
});

function querySearch(queryString: string, cb: any) {
  let mail = "";
  if (api.form.username.endsWith(".com")) {
    mail = api.form.username.substring(0, api.form.username.indexOf("@"));
  } else {
    mail = api.form.username;
  }
  cb([
    { value: mail + "@163.com" },
    { value: mail + "@126.com" },
    { value: mail + "@139.com" },
    { value: mail + "@189.com" },
    { value: mail + "@sohu.com" },
    { value: mail + "@aliyun.com" },
    { value: mail + "@hotmail.com" },
    { value: mail + "@yahoo.com" },
    { value: mail + "@msn.com" },
    { value: mail + "@mail.com" },
    { value: mail + "@qq.com" },
    { value: mail + "@sina.cn" },
    { value: mail + "@gmail.com" },
  ]);
}

async function submit() {
  const values = await formRef.value.validate();
  if (values) {
    api.login();
  }
}
</script>

<style lang="scss" scoped>
.login-base {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/login-bg.jpg');
  background-size: 100%;

  .login-page {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to left, rgba(#000, 0.7), rgba(#000, 0.6) );
    .login-view{
      width: 800px;
      .right {
        width: 400px;
      }

      .left {
        width: 320px;
        background: rgba(#000,0.4);
        padding: 24px;
        border-radius: 16px;
        backdrop-filter: blur(8px);
      }
    }

  }
}

</style>
